<template>
  <div>
    <van-nav-bar title="立即购买" left-arrow @click-left="onClickLeft" />
    <van-card
      :price="goodlists.price"
      :title="goodlists.name"
      :thumb="goodlists.img"
    />
    <van-contact-list
      v-model="chosenContactId"
      :list="list"
      @add="onAdd"
      @edit="onEdit"
      @select="onSelect"
      add-text="立即购买"
      van-icon="checked"
    >
    </van-contact-list>
  </div>
</template>

<script>
import { goodxqApi } from "@/api/home";
export default {
  props: {
    id: [Number, String],
  },
  data() {
    return {
      chosenContactId: "1",
      list: [
        {
          id: "1",
          name: "支付宝支付",
          tel: "数亿用户都在使用，安全可托付",
          isDefault: true,
        },
        {
          id: "2",
          name: "微信支付",
          tel: "亿万用户选择，更快更安全",
        },
      ],
      token: "595fe950-7ebd-11ed-aa1f-dd279271aa3a",
      goodlists: [],
    };
  },
  async created() {
    let obj = {
      token: this.token,
      goodsId: this.id,
    };

    try {
      let { data } = await goodxqApi(obj);
      console.log(data);
      this.goodlists = data.data.goodsData;
      console.log(this.goodlists);
    } catch (error) {
      console.log(error);
    }
  },
  methods: {
    onAdd() {
      this.$toast("开发中");
    },
    onEdit() {
      this.$toast("编辑支付宝");
    },
    onSelect() {
      this.$toast("选择微信");
    },
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-cell {
  line-height: 3rem;
  font-size: 1rem;
}
/deep/ .van-contact-list__bottom {
  height: 5rem;
}
/deep/.van-contact-list__add {
  height: 3rem;
}
/deep/.van-button--normal {
  font-size: 1.5rem;
}
/deep/.van-card__thumb {
  width: 7rem;
  height: 7rem;
}
/deep/.van-card__title {
  max-height: 4.85333rem;
  line-height: 1.3rem;
}

/deep/.van-card__bottom {
  line-height: 3rem;
}
/deep/ .van-card {
  font-size: 1rem;
}
/deep/.van-multi-ellipsis--l2 {
  white-space: wrap;
}
/deep/.van-card__price {
  color: red;
  font-size: 1rem;
}
.van-card__price-integer {
  font-size: 1rem;
}
/deep/.van-nav-bar__content {
  height: 3rem;
}
/deep/.van-nav-bar__title {
  font-size: 1rem;
  line-height: 1rem;
}
/deep/.van-nav-bar__arrow {
  font-size: 1.5rem;
  color: black;
}
</style>
